<template>
  <div class="bottle">
    <!-- bottle -->
    <div class="intro">

      <h2 class="titlek">
        你的杯子朋友🫖
        <go-cute-button style="float: right;margin-top: -5px" @click="toAddCup">交一个杯子朋友</go-cute-button>
      </h2>

      <transition name="fade">
        <div v-if="show">
          <p class="intro-content">
            这些是你的杯子们。实验表明，喝白开水比喝黑开水更健康。
            一般正常成年人，每天摄入水份2500-3500mL比较合适，除了每天直接喝的茶水外，一些含水量较多的水果、牛奶制品、液体饮料、活性饮料，包括碳酸饮料，都可以作为摄入液体的指数进行计算。
          </p>
        </div>
      </transition>

      <van-divider
          :style="{ color: '#4298e7', borderColor: '#2a93ea', padding: '0 16px 0 0', margin: '0px',borderStyle: 'solid' }">
        <i class="iconfont icon-xiala" :class="show?'go':'aa'" @click="showx"></i>
      </van-divider>

    </div>

    <div class="cup1-list">
      <div class="cup-list-warning" v-if="user.cups.length <= 0">
        啥也没有
      </div>
      <draggable
          v-if="user.cups.length > 0"
          :disabled="disabled"
          :list="user.cups"
          :animation="500"
          ghost-class="ghost-cup"
          dragClass="dragClass"

          group="cups"
          :filter="'.llx'"
      >
        <cup ref="cups" :index="index" v-for="(cup,index) in user.cups" :cup="cup"
             :key="cup.id+'cups1'"
             :bg-color="'rgb(242, 212, 182)'"
             @aClick="aClick"></cup>
      </draggable>
    </div>

    <cup-add :new-cup-list="newCupList" v-if="newCupList.length>0"></cup-add>
    <cup-detail v-for="i in openList" :key="i+'cup_detail'" :index="i" @close="close(i)"></cup-detail>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex';
import draggable from "vuedraggable";
import Cup from "@/components/Cup";
import CupDetail from "@/components/CupDetail";
import GoButton from "@/components/common/GoButton";
import CupAdd from "@/components/CupAdd";
import GoCuteButton from "@/components/common/GoCuteButton";

export default {
  name: "Bottle",
  components: {
    GoCuteButton,
    CupAdd,
    GoButton,
    CupDetail,
    Cup,
    draggable,
  },
  computed: {
    ...mapState(['user']),
    disabled() {
      return this.openList.length > 0;
    }
  },
  mounted() {
  },
  data() {
    return {
      show: false,
      openList: [],
      newCupList: []
    }
  },
  methods: {
    ...mapMutations(['notify']),
    aClick(index) {

      for (let i = 0; i < this.openList.length; i++) {
        if (this.openList[i] === index) {
          for (let i = 0; i < this.$refs.cups.length; i++) {
            if (this.user.cups[index].id === this.$refs.cups[i].cup.id) {
              this.$refs.cups[i].active = 2;
              this.openList.splice(this.openList.indexOf(index), 1);
              break;
            }
          }
        }
      }

      for (let i = 0; i < this.$refs.cups.length; i++) {
        if (this.user.cups[index].id === this.$refs.cups[i].cup.id) {
          if (this.$refs.cups[i].active === 0) {
            this.$refs.cups[i].active = 1;
          } else if (this.$refs.cups[i].active === 1) {
            this.$refs.cups[i].active = 2;
          } else {
            this.$refs.cups[i].active = 1;
          }
          break;
        }
      }

      this.openList.push(index)
    },
    showx() {
      this.show = !this.show;
    },
    toAddCup() {
      if (this.newCupList.length === 0) {
        this.newCupList.push({
          capacity: 0,
          intro: '介绍一下它吧!\nclick me',
          settings: {
            waterColour: null
          }
        })
      } else {
        this.notify({msg: '你已经在开始某项活动了哦', duration: 2000})
      }
    },
    close(index) {
      for (let i = 0; i < this.$refs.cups.length; i++) {
        if (this.user.cups[index].id === this.$refs.cups[i].cup.id) {
          this.$refs.cups[i].active = 2;
          break;
        }
      }
      this.openList.splice(this.openList.indexOf(index), 1);
    }
  }
}
</script>

<style lang="less">
.bottle {
  margin-top: 25px;
  padding: 0 20px;
}


.titlek {
  padding-left: 10px;
  //height: 37.5px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
}

.intro-content {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.18px;
  line-height: 25px;
  margin-top: 20px;
  margin-bottom: 12px;
}

.fade-enter-active, .fade-leave-active {
  transition: all .5s;
}

.fade-enter, .fade-leave-to {
  transform: translateY(-40px);
  opacity: 0;
}

.aa {
  font-size: 16px;
  transition: all 1s;
}

.go {
  font-size: 24px;
  transform: rotate(180deg);
  transition: all 1s;
}


.van-button {
  border-radius: 10px;
  background: #4298e7;
  color: #ffffff;
  padding: 0 20px;
  float: right;
}

.dragClass {
  background-color: rgba(255, 255, 255, 1.2);
  transform: scale(1.05);
}

.ghost-cup {
  opacity: 0;
}

.cup-list-warning {
  margin-top: 40px;
  font-size: 30px;
  text-align: center;
  font-family: ZCOOL, serif;
}
</style>